<template>
  <div>

    <div class="quote">
      <div class="quoteTop">

        <h4 class="panel-heading">查询条件</h4>

        <div class="query">

          <Row>

            <Col span="6">
            <label>链接名称</label>
            <Input size="small" style="width: 50%" v-model="urlName"/>
            </Col>


            <Col span="6">
            <Button size="small" @click="getRecomUrl" type="primary">查 询</Button>
            <Button size="small" @click="reset" type="error">重 置</Button>
            </Col>

          </Row>

        </div>

      </div>

      <div>

      </div>
    </div>

    <div class="quote">
      <div class="quoteCenten">
        <table cellspacing="0">

          <tr>
            <th>No.</th>
            <th>链接名称</th>
            <th>推广链接</th>
            <th>操作</th>
          </tr>

          <tr v-for="(item,index) in recomUrlList">
            <td v-text="index+1"></td>
            <td v-text="item.urlName"></td>
            <td v-text="item.resultUrl"></td>
            <td>
              <a href="javascript:void(0)" class="btn" v-bind:data-clipboard-text="item.resultUrl"
                 @click="copyToClipBoard(item)">复制链接</a>
            </td>
          </tr>
        </table>
      </div>
    </div>

  </div>

</template>

<script type="text/javascript">
  import api from '../../utils/api.js';
  import Clipboard from 'clipboard';

  export default {
    data: function () {
      return {

        recomUrlList: [],

        agentId: '',

        urlName: "",

      }
    },
    created: function () {
      this.agentId = JSON.parse(localStorage.operation).id;
      this.getRecomUrl();
    },
    methods: {

      getRecomUrl: function () {
        var self = this;
        api.getRecomUrl(self.agentId,self.urlName).then(function (res) {
          if (res.body.state == 1) {
            self.recomUrlList = res.body.data;

            self.recomUrlList.forEach(function (item) {
              item.resultUrl = api.getRecomLink()+"?code=" + item.id;
            })

            console.log(self.recomUrlList);
          } else {
            self.$Message.error(res.body.message.info);
          }

        })
      },

      copyToClipBoard: function (item) {
        console.log("test Copy")
        this.$Message.success("【" + item.urlName + "】复制成功");
      },

      reset: function () {
        this.urlName = '';
      },

    }
    ,
    mounted() {
      const clipboard = new Clipboard('.btn');
    }
  }
</script>
